<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资产上链系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#00B42A',
            danger: '#F53F3F',
            warning: '#FF7D00',
            info: '#86909C',
            light: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .btn-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
      }
      .form-focus {
        @apply focus:ring-2 focus:ring-primary/30 focus:border-primary;
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-inter text-dark">
  <!-- 顶部导航 -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-link text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">资产上链系统</h1>
      </div>
      <nav class="hidden md:flex items-center space-x-6">
        <a href="#dashboard" class="text-dark hover:text-primary transition-colors">仪表盘</a>
        <a href="#create" class="text-dark hover:text-primary transition-colors">资产上链</a>
        <a href="#query" class="text-dark hover:text-primary transition-colors">资产查询</a>
        <a href="#transfer" class="text-dark hover:text-primary transition-colors">资产转移</a>
      </nav>
      <button class="md:hidden text-dark text-xl">
        <i class="fa fa-bars"></i>
      </button>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <!-- 仪表盘 -->
    <section id="dashboard" class="mb-12">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-center">资产概览</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl p-6 card-shadow transform transition-all duration-300 hover:shadow-lg">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-info text-sm">总资产</p>
              <h3 class="text-3xl font-bold mt-1" id="total-assets">0</h3>
            </div>
            <div class="bg-primary/10 p-3 rounded-lg">
              <i class="fa fa-database text-primary text-xl"></i>
            </div>
          </div>
          <div class="mt-4 flex items-center">
            <span class="text-secondary text-sm flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 12%
            </span>
            <span class="text-xs text-info ml-2">相比上月</span>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow transform transition-all duration-300 hover:shadow-lg">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-info text-sm">活跃资产</p>
              <h3 class="text-3xl font-bold mt-1" id="active-assets">0</h3>
            </div>
            <div class="bg-secondary/10 p-3 rounded-lg">
              <i class="fa fa-line-chart text-secondary text-xl"></i>
            </div>
          </div>
          <div class="mt-4 flex items-center">
            <span class="text-secondary text-sm flex items-center">
              <i class="fa fa-arrow-up mr-1"></i> 8%
            </span>
            <span class="text-xs text-info ml-2">相比上月</span>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow transform transition-all duration-300 hover:shadow-lg">
          <div class="flex justify-between items-start">
            <div>
              <p class="text-info text-sm">今日交易</p>
              <h3 class="text-3xl font-bold mt-1" id="today-transactions">0</h3>
            </div>
            <div class="bg-warning/10 p-3 rounded-lg">
              <i class="fa fa-exchange text-warning text-xl"></i>
            </div>
          </div>
          <div class="mt-4 flex items-center">
            <span class="text-danger text-sm flex items-center">
              <i class="fa fa-arrow-down mr-1"></i> 3%
            </span>
            <span class="text-xs text-info ml-2">相比昨日</span>
          </div>
        </div>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded-xl p-6 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-lg">资产分布</h3>
            <div class="flex space-x-2">
              <button class="px-3 py-1 text-xs rounded-full bg-primary/10 text-primary">月度</button>
              <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">季度</button>
              <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">年度</button>
            </div>
          </div>
          <div class="h-80">
            <canvas id="assetsChart"></canvas>
          </div>
        </div>
        
        <div class="bg-white rounded-xl p-6 card-shadow">
          <div class="flex justify-between items-center mb-6">
            <h3 class="font-bold text-lg">最近交易</h3>
            <button class="text-primary text-sm hover:underline">查看全部</button>
          </div>
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead>
                <tr class="border-b border-gray-100">
                  <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">资产ID</th>
                  <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">操作类型</th>
                  <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">时间</th>
                  <th class="text-left py-3 px-2 text-sm font-medium text-gray-500">状态</th>
                </tr>
              </thead>
              <tbody id="transactions-table">
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="py-3 px-2 text-sm">ASSET-001</td>
                  <td class="py-3 px-2 text-sm">创建</td>
                  <td class="py-3 px-2 text-sm text-gray-500">2025-05-27 10:30</td>
                  <td class="py-3 px-2">
                    <span class="px-2 py-1 text-xs rounded-full bg-secondary/10 text-secondary">成功</span>
                  </td>
                </tr>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="py-3 px-2 text-sm">ASSET-002</td>
                  <td class="py-3 px-2 text-sm">转移</td>
                  <td class="py-3 px-2 text-sm text-gray-500">2025-05-27 09:15</td>
                  <td class="py-3 px-2">
                    <span class="px-2 py-1 text-xs rounded-full bg-secondary/10 text-secondary">成功</span>
                  </td>
                </tr>
                <tr class="border-b border-gray-50 hover:bg-gray-50 transition-colors">
                  <td class="py-3 px-2 text-sm">ASSET-003</td>
                  <td class="py-3 px-2 text-sm">创建</td>
                  <td class="py-3 px-2 text-sm text-gray-500">2025-05-27 08:42</td>
                  <td class="py-3 px-2">
                    <span class="px-2 py-1 text-xs rounded-full bg-secondary/10 text-secondary">成功</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 资产上链 -->
    <section id="create" class="mb-12">
      <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold mb-6">资产上链</h2>
        
        <form id="create-asset-form" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="create-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID <span class="text-danger">*</span></label>
              <input type="text" id="create-id" name="id" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入资产ID" required>
            </div>
            
            <div>
              <label for="create-owner" class="block text-sm font-medium text-gray-700 mb-1">所有者 <span class="text-danger">*</span></label>
              <input type="text" id="create-owner" name="owner" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入所有者" required>
            </div>
            
            <div>
              <label for="create-name" class="block text-sm font-medium text-gray-700 mb-1">资产名称 <span class="text-danger">*</span></label>
              <input type="text" id="create-name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入资产名称" required>
            </div>
            
            <div>
              <label for="create-info" class="block text-sm font-medium text-gray-700 mb-1">资产信息</label>
              <input type="text" id="create-info" name="info" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入资产信息">
            </div>
          </div>
          
          <div class="flex justify-end">
            <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg btn-hover flex items-center">
              <i class="fa fa-plus-circle mr-2"></i> 提交上链
            </button>
          </div>
        </form>
        
        <div id="create-result" class="mt-6 hidden">
          <div class="p-4 rounded-lg bg-primary/5 border border-primary/20">
            <h3 class="font-medium text-primary mb-2">操作结果</h3>
            <pre class="bg-white p-3 rounded-lg text-sm overflow-x-auto" id="create-result-data"></pre>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 资产查询 -->
    <section id="query" class="mb-12">
      <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold mb-6">资产查询</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
          <div class="md:col-span-2">
            <label for="query-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID <span class="text-danger">*</span></label>
            <input type="text" id="query-id" name="id" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入要查询的资产ID" required>
          </div>
          
          <div class="flex items-end">
            <button id="query-btn" class="w-full px-6 py-3 bg-primary text-white rounded-lg btn-hover flex items-center justify-center">
              <i class="fa fa-search mr-2"></i> 查询
            </button>
          </div>
        </div>
        
        <div id="query-loading" class="my-6 text-center hidden">
          <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary/20 border-t-primary"></div>
          <p class="mt-2 text-gray-500">正在查询...</p>
        </div>
        
        <div id="query-result" class="mt-6 hidden">
          <div class="p-4 rounded-lg bg-primary/5 border border-primary/20">
            <h3 class="font-medium text-primary mb-4">资产详情</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="p-4 bg-white rounded-lg">
                <div class="text-sm text-gray-500 mb-1">资产ID</div>
                <div class="font-medium" id="query-result-id">-</div>
              </div>
              
              <div class="p-4 bg-white rounded-lg">
                <div class="text-sm text-gray-500 mb-1">所有者</div>
                <div class="font-medium" id="query-result-owner">-</div>
              </div>
              
              <div class="p-4 bg-white rounded-lg">
                <div class="text-sm text-gray-500 mb-1">资产名称</div>
                <div class="font-medium" id="query-result-name">-</div>
              </div>
              
              <div class="p-4 bg-white rounded-lg">
                <div class="text-sm text-gray-500 mb-1">资产信息</div>
                <div class="font-medium" id="query-result-info">-</div>
              </div>
            </div>
          </div>
        </div>
        
        <div id="query-error" class="mt-6 hidden">
          <div class="p-4 rounded-lg bg-danger/5 border border-danger/20">
            <h3 class="font-medium text-danger mb-2">查询失败</h3>
            <p class="text-sm" id="query-error-message"></p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 资产转移 -->
    <section id="transfer" class="mb-12">
      <div class="bg-white rounded-xl p-6 md:p-8 card-shadow">
        <h2 class="text-2xl font-bold mb-6">资产转移</h2>
        
        <form id="transfer-asset-form" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="transfer-id" class="block text-sm font-medium text-gray-700 mb-1">资产ID <span class="text-danger">*</span></label>
              <input type="text" id="transfer-id" name="id" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入要转移的资产ID" required>
            </div>
            
            <div>
              <label for="transfer-owner" class="block text-sm font-medium text-gray-700 mb-1">新所有者 <span class="text-danger">*</span></label>
              <input type="text" id="transfer-owner" name="owner" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-focus" placeholder="请输入新所有者" required>
            </div>
          </div>
          
          <div class="flex justify-end">
            <button type="submit" class="px-6 py-3 bg-warning text-white rounded-lg btn-hover flex items-center">
              <i class="fa fa-exchange mr-2"></i> 转移资产
            </button>
          </div>
        </form>
        
        <div id="transfer-loading" class="my-6 text-center hidden">
          <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-warning/20 border-t-warning"></div>
          <p class="mt-2 text-gray-500">正在处理...</p>
        </div>
        
        <div id="transfer-result" class="mt-6 hidden">
          <div class="p-4 rounded-lg bg-secondary/5 border border-secondary/20">
            <h3 class="font-medium text-secondary mb-2">操作成功</h3>
            <p class="text-sm">资产 <span id="transfer-result-id" class="font-medium"></span> 已成功转移至 <span id="transfer-result-owner" class="font-medium"></span></p>
          </div>
        </div>
        
        <div id="transfer-error" class="mt-6 hidden">
          <div class="p-4 rounded-lg bg-danger/5 border border-danger/20">
            <h3 class="font-medium text-danger mb-2">转移失败</h3>
            <p class="text-sm" id="transfer-error-message"></p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <div class="flex items-center space-x-2 mb-4">
            <i class="fa fa-link text-primary text-2xl"></i>
            <h3 class="text-xl font-bold">资产上链系统</h3>
          </div>
          <p class="text-gray-400 mb-4">基于 Hyperledger Fabric 的资产数字化管理平台，为企业提供安全、高效、透明的资产上链解决方案。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-github text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa fa-linkedin text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#dashboard" class="text-gray-400 hover:text-white transition-colors">仪表盘</a></li>
            <li><a href="#create" class="text-gray-400 hover:text-white transition-colors">资产上链</a></li>
            <li><a href="#query" class="text-gray-400 hover:text-white transition-colors">资产查询</a></li>
            <li><a href="#transfer" class="text-gray-400 hover:text-white transition-colors">资产转移</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-center text-gray-400">
              <i class="fa fa-envelope-o mr-2"></i>
              <span>contact@asset-chain.com</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-phone mr-2"></i>
              <span>+86 123 4567 8910</span>
            </li>
            <li class="flex items-center text-gray-400">
              <i class="fa fa-map-marker mr-2"></i>
              <span>北京市海淀区中关村大街1号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
        <p>© 2025 资产上链系统. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <script>
    // 实际API调用
    const api = {
      // 创建资产
      async createAsset(data) {
        try {
          const response = await fetch('/api/asset', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          });
          
          if (!response.ok) {
            throw new Error(await response.text());
          }
          
          return response.json();
        } catch (error) {
          console.error('创建资产失败:', error);
          throw error;
        }
      },
      
      // 查询资产
      async queryAsset(id) {
        try {
          const response = await fetch(`/api/asset/${id}`);
          
          if (!response.ok) {
            throw new Error(await response.text());
          }
          
          return response.json();
        } catch (error) {
          console.error('查询资产失败:', error);
          throw error;
        }
      },
      
      // 转移资产
      async transferAsset(id, owner) {
        try {
          const response = await fetch(`/api/asset/${id}/transfer`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ owner })
          });
          
          if (!response.ok) {
            throw new Error(await response.text());
          }
          
          return response.json();
        } catch (error) {
          console.error('转移资产失败:', error);
          throw error;
        }
      },
      
      // 获取资产统计信息
      async getAssetStats() {
        try {
          const response = await fetch('/api/stats');
          
          if (!response.ok) {
            throw new Error(await response.text());
          }
          
          return response.json();
        } catch (error) {
          console.error('获取统计信息失败:', error);
          throw error;
        }
      },
      
      // 获取最近交易
      async getRecentTransactions() {
        try {
          const response = await fetch('/api/transactions/recent');
          
          if (!response.ok) {
            throw new Error(await response.text());
          }
          
          return response.json();
        } catch (error) {
          console.error('获取最近交易失败:', error);
          throw error;
        }
      }
    };
    
    // 初始化图表
    function initChart() {
      const ctx = document.getElementById('assetsChart').getContext('2d');
      
      const assetsChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
          datasets: [{
            label: '资产数量',
            data: [12, 19, 23, 25, 30, 38],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              mode: 'index',
              intersect: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                color: 'rgba(0, 0, 0, 0.05)'
              }
            },
            x: {
              grid: {
                display: false
              }
            }
          }
        }
      });
      
      return assetsChart;
    }
    
    // 更新统计信息
    async function updateStats() {
      try {
        const stats = await api.getAssetStats();
        
        document.getElementById('total-assets').textContent = stats.totalAssets || 0;
        document.getElementById('active-assets').textContent = stats.activeAssets || 0;
        document.getElementById('today-transactions').textContent = stats.todayTransactions || 0;
      } catch (error) {
        console.error('更新统计信息失败:', error);
      }
    }
    
    // 更新最近交易
    async function updateTransactions() {
      try {
        const transactions = await api.getRecentTransactions();
        const tableBody = document.getElementById('transactions-table');
        
        // 清空表格
        tableBody.innerHTML = '';
        
        if (transactions && transactions.length > 0) {
          transactions.forEach(tx => {
            const row = document.createElement('tr');
            row.className = 'border-b border-gray-50 hover:bg-gray-50 transition-colors';
            
            const formatDate = (dateStr) => {
              const date = new Date(dateStr);
              return date.toLocaleString();
            };
            
            row.innerHTML = `
              <td class="py-3 px-2 text-sm">${tx.assetId}</td>
              <td class="py-3 px-2 text-sm">${tx.type}</td>
              <td class="py-3 px-2 text-sm text-gray-500">${formatDate(tx.timestamp)}</td>
              <td class="py-3 px-2">
                <span class="px-2 py-1 text-xs rounded-full ${tx.success ? 'bg-secondary/10 text-secondary' : 'bg-danger/10 text-danger'}">${tx.success ? '成功' : '失败'}</span>
              </td>
            `;
            
            tableBody.appendChild(row);
          });
        } else {
          tableBody.innerHTML = `
            <tr>
              <td colspan="4" class="py-6 text-center text-gray-500">暂无交易记录</td>
            </tr>
          `;
        }
      } catch (error) {
        console.error('更新交易记录失败:', error);
      }
    }
    
    // 初始化页面
    document.addEventListener('DOMContentLoaded', () => {
      // 初始化图表
      const chart = initChart();
      
      // 首次加载时更新统计信息和交易记录
      updateStats();
      updateTransactions();
      
      // 资产上链表单提交
      document.getElementById('create-asset-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const formData = {
          id: document.getElementById('create-id').value,
          owner: document.getElementById('create-owner').value,
          name: document.getElementById('create-name').value,
          info: document.getElementById('create-info').value
        };
        
        try {
          const result = await api.createAsset(formData);
          document.getElementById('create-result-data').textContent = JSON.stringify(result, null, 2);
          document.getElementById('create-result').classList.remove('hidden');
          
          // 重置表单
          e.target.reset();
          
          // 更新统计信息和交易记录
          updateStats();
          updateTransactions();
        } catch (error) {
          document.getElementById('create-result-data').textContent = error.message || '创建资产失败';
          document.getElementById('create-result').classList.remove('hidden');
          document.getElementById('create-result').classList.add('bg-danger/5');
          document.getElementById('create-result').classList.remove('bg-primary/5');
        }
      });
      
      // 资产查询
      document.getElementById('query-btn').addEventListener('click', async () => {
        const id = document.getElementById('query-id').value.trim();
        
        if (!id) {
          document.getElementById('query-error-message').textContent = '请输入资产ID';
          document.getElementById('query-error').classList.remove('hidden');
          document.getElementById('query-result').classList.add('hidden');
          return;
        }
        
        // 显示加载状态
        document.getElementById('query-loading').classList.remove('hidden');
        document.getElementById('query-error').classList.add('hidden');
        document.getElementById('query-result').classList.add('hidden');
        
        try {
          const result = await api.queryAsset(id);
          
          // 更新结果显示
          document.getElementById('query-result-id').textContent = result.id;
          document.getElementById('query-result-owner').textContent = result.owner;
          document.getElementById('query-result-name').textContent = result.name;
          document.getElementById('query-result-info').textContent = result.info;
          
          document.getElementById('query-result').classList.remove('hidden');
        } catch (error) {
          document.getElementById('query-error-message').textContent = error.message || '查询失败，请重试';
          document.getElementById('query-error').classList.remove('hidden');
        } finally {
          // 隐藏加载状态
          document.getElementById('query-loading').classList.add('hidden');
        }
      });
      
      // 资产转移表单提交
      document.getElementById('transfer-asset-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        
        const id = document.getElementById('transfer-id').value.trim();
        const owner = document.getElementById('transfer-owner').value.trim();
        
        if (!id) {
          document.getElementById('transfer-error-message').textContent = '请输入资产ID';
          document.getElementById('transfer-error').classList.remove('hidden');
          document.getElementById('transfer-result').classList.add('hidden');
          return;
        }
        
        if (!owner) {
          document.getElementById('transfer-error-message').textContent = '请输入新所有者';
          document.getElementById('transfer-error').classList.remove('hidden');
          document.getElementById('transfer-result').classList.add('hidden');
          return;
        }
        
        // 显示加载状态
        document.getElementById('transfer-loading').classList.remove('hidden');
        document.getElementById('transfer-error').classList.add('hidden');
        document.getElementById('transfer-result').classList.add('hidden');
        
        try {
          const result = await api.transferAsset(id, owner);
          
          // 更新结果显示
          document.getElementById('transfer-result-id').textContent = result.assetId;
          document.getElementById('transfer-result-owner').textContent = result.newOwner;
          
          document.getElementById('transfer-result').classList.remove('hidden');
          
          // 重置表单
          e.target.reset();
          
          // 更新交易记录
          updateTransactions();
        } catch (error) {
          document.getElementById('transfer-error-message').textContent = error.message || '转移失败，请重试';
          document.getElementById('transfer-error').classList.remove('hidden');
        } finally {
          // 隐藏加载状态
          document.getElementById('transfer-loading').classList.add('hidden');
        }
      });
      
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          const targetId = this.getAttribute('href');
          const targetElement = document.querySelector(targetId);
          
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth'
            });
          }
        });
      });
    });
  </script>
</body>
</html>